<!--
 * @Description: jsx   javascript + xml
 * @Author: zzj
 * @Date: 2021-10-12 10:37:34
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-12 19:57:54
-->


<!-- 测不出来,打码识别不了,脚手架可以测 -->

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>渲染函数</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>

<body>
	<div id="app">
		<briup-list :data="['larry','terry']">
			<h1>列表</h1>
		</briup-list>
	</div>

	<script>
		Vue.component("briup-list", {
			render: function (h) {
				// let lis = this.data.map(item => {
				// 	return h("li", item)
				// })
				// //$slots 所有的插槽     default  默认插槽
				// let child = [this.$slots.default, ...lis]
				// return h("ul", {}, child)
				let lis = this.data.map(item => {
					return <li>{{item}}</li>
				});
				return(
					<ul>
						{lis}
					</ul>
				)
			},
			props: {
				data: {
					type: Array,
					default: function () {
						return []
					}
				}
			}
		})


		new Vue({
			el: "#app",
			data: {

			}
		})
	</script>
</body>

</html>